<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <global-child v-if="flag"></global-child>
        <button @click="flag=!flag">隐藏/显示</button>

    </div>
</body>

</html>
<script>
    // 自定义组件
    // 自定义组件,就当前与定义了一个单独的个html代码片段,只不过该代码片段有自己的data 计算属性 方法等等
    // 使用时:以自定义标签的形式使用
    // 注意: 当自定义组件名为小驼峰写法,则vue 最终识别为都小写,这样组件名错误了, 使用时将两个单子之间使用- 连接,
    // 第二个单词小写
    // 分为2种: 
    // 第一种: 全局自定义组件 (使用范围在全局的任意位置,也就是在不同的组件中可以使用)
    // 第二种: 局部自定义组件(最多))只能在当前注册的父组件中使用 

    const app = Vue.createApp({
        data() {
            return {
                username: "成龙",
                flag: true,
            }
        },
        methods: {

        }
    })

    // 第一种: 全局自定义组件
    // 语法: app.component(组件名, { 配置项 })
    // template: 标签结构
    app.component('globalChild', {
        template: `<div @click='handleClick'>我是全局组件--{{username}}</div>`,
        data() {
            return {
                username: "房祖名",
                timer: null,
            }
        },
        methods: {
            handleClick() {
                console.log(this); // this 指向当前的子组件的实例对象
                console.log(this.username);
            }
        },
        created() {
            console.log('globalChild-created');
            this.timer = setInterval(() => {
                console.log('定时器');
            }, 1000)
            document.onclick = () => {
                console.log('你点我啦!!!');
            }
        },
        unmounted() {
            // 组件卸载后
            clearInterval(this.timer);
            // 清除dom 0 级的事件绑定
            document.onclick = null
            // 清除dom2级事件 
            // 元素.removeEventListener(事件名,事件执行函数)
            console.log('子组件卸载-globalChild-unmounted');

        }
    })

    app.mount('#app')
</script>